/* 第六 */

.screen06 {
    /* background: url('../images/06-bg.png') no-repeat left bottom; */
    background: url('../images/06-bg.png') no-repeat 25% 100%;
}

.screen06.now {
    transition: background 2s linear 3s;
    /* background: url('../images/06-bg.png') no-repeat -1100px bottom; */
    background: url('../images/06-bg.png') no-repeat 100% 100%;
}

.screen06 .cloud {
    position: absolute;
    top: -150px;
    left: 0;
    z-index: 100;
}

.screen06 .cloud img:first-child {
    animation: cloud06 40s linear infinite alternate;
}

.screen06 .cloud img:last-child {
    position: absolute;
    top: 0;
    left: 0;
    animation: cloud06 20s linear infinite alternate;
}

.screen06 .text img:first-child {
    opacity: 1;
}

.screen06 .text img:last-child {
    opacity: 0;
}

.screen06.now .text img:first-child {
    opacity: 0;
    transition: all 0.1s linear 8s;
}

.screen06.now .text img:last-child {
    opacity: 1;
    transition: all 1s linear 8s;
}

.screen06 .box {
    position: absolute;
    top: 0;
    left: 100px;
    transform: translateX(-1000px);
}

.screen06 .box.show {
    animation: box06 4s linear forwards;
}

.screen06 .text {
    position: absolute;
    top: -80px;
    left: 100px;
}

.screen06 .car {
    position: absolute;
    left: 50px;
    bottom: 0;
}

.screen06 .car img {
    opacity: 0;
    position: absolute;
}

.screen06 .car .carImg {
    opacity: 1;
    bottom: 0;
    left: 0;
    position: relative;
}

.screen06.now .car .buyer {
    transition: all 0.25s 1.3s;
    opacity: 1;
    position: absolute;
    top: -50px;
    right: -45px;
}

.screen06.now .car .address {
    transition: all 0.25s 4.3s;
    opacity: 1;
    position: absolute;
    top: -50px;
    right: -45px;
}

.screen06.now .car .worker {
    opacity: 0;
    left: 0;
    bottom: 0;
    transform: scale(0.3);
    animation: worker 2s 5.5s linear forwards;
}

.screen06 .car .say {
    right: -280px;
    top: -400px;
}

.screen06.now .car .say {
    opacity: 1;
    transition: all 0.5s linear 7.5s;
}

.screen06 .person {
    position: absolute;
    right: 280px;
    bottom: 120px;
}

.screen06 .person img {
    position: absolute;
    opacity: 0;
}

.screen06.now .person .personImg {
    left: 30px;
    bottom: -10px;
    transform-origin: right bottom;
    animation: girl 2s linear 8s forwards;
    z-index: 99;
}

.screen06.now .person .door {
    opacity: 1;
    left: 0;
    bottom: 0;
    transition: all 0.4s linear 7s;
    z-index: 98;
}

@keyframes girl {
    from {
        transform: translate(10px, 10px) scale(0.3);
    }
    to {
        opacity: 1;
        transform: translateX(-30px) scale(1)
    }
}

@keyframes box06 {
    from {
        transform: translateX(-1000px);
    }
    50% {
        transform: none;
    }
    100% {
        transform: translateY(450px) scale(0.5);
    }
}

@keyframes cloud06 {
    from {}
    to {
        transform: translateX(1000px);
    }
}

@keyframes worker {
    from {
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translateY(-20px) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: translate(230px, -100px) scale(1);
    }
}